<template>
  <div style="position: relative">
    <!-- 未开始-倒计时 -->
    <div class="notstart items-center" v-if="status == 1">
      <div class="notstart-info" :class="{ 'notstart-info-sun': isSun }">
        <div class="notstart-title items-center">
          <img
            v-if="isSun"
            class="notstart-title-icon"
            src="/image/lotterymoney/lottery-notstart1-icon.svg"
          />
          <img
            v-else
            class="notstart-title-icon"
            src="/image/lotterymoney/lottery-notstart-icon.svg"
          />
          <div class="notstart-title-text">{{ $t("lotteryMoney.cjdjs") }}</div>
        </div>
        <div class="notstart-center items-center">
          <div
            class="notstart-center-text notstart-center-width"
            :class="{ 'notstart-center-text-sun': isSun }"
          >
            {{ hours }}
          </div>
          <div
            class="notstart-center-text"
            :class="{ 'notstart-center-text-sun': isSun }"
          >
            :
          </div>
          <div
            class="notstart-center-text notstart-center-width"
            :class="{ 'notstart-center-text-sun': isSun }"
          >
            {{ minutes }}
          </div>
          <div
            class="notstart-center-text"
            :class="{ 'notstart-center-text-sun': isSun }"
          >
            :
          </div>
          <div
            class="notstart-center-text notstart-center-width"
            :class="{ 'notstart-center-text-sun': isSun }"
          >
            {{ seconds }}
          </div>
        </div>
        <div class="notstart-footer">
          {{ $t("lotteryMoney.cjdjsks") }}
        </div>
      </div>
    </div>
    <div class="lotteryStart">
      <!-- 进度条 -->
      <Progress
        class="lotteryStart-progress"
        :curDay="curDay"
        :lottery="lottery"
        :status="status"
        :beginTimeTag="beginTimeTag"
        :firstStageEndTimeTag="firstStageEndTimeTag"
        :secondEndTimeTag="secondEndTimeTag"
      ></Progress>

      <!-- 当前领先 -->
      <div class="firstShow items-center">
        <!-- 背景 -->
        <img
          class="firstShow-bg"
          src="/image/lotterymoney/firstShow-bg-icon.svg"
        />
        <!-- 标题 -->
        <div class="firstShow-title items-center">
          <!-- 标题左右两边的 icon -->
          <img
            class="firstShow-bg-top firstShow-bg-top-left"
            src="/image/lotterymoney/firstShow-topleft-icon.svg"
          />
          <img
            class="firstShow-bg-top firstShow-bg-top-right"
            src="/image/lotterymoney/firstShow-topleft-icon.svg"
          />
          <!-- 标题 -->
          <div class="firstShow-title-text">{{ $t("lotteryMoney.dqlxz") }}</div>
          <!-- 倒计时 -->
          <div class="firstShow-title-countdown items-center">
            <div class="firstShow-title-countdown-left">
              {{ theLastTime.minutes }}
            </div>
            <div class="firstShow-title-countdown-center">:</div>
            <div class="firstShow-title-countdown-right">
              {{ theLastTime.seconds }}
            </div>
          </div>
        </div>
        <!-- 信息 -->
        <div class="firstShow-info items-center">
          <div v-if="lottery.leader" class="firstShow-info-left">
            <div class="firstShow-info-left-sid">
              {{ lottery.leader ? lottery.leader.sid.substring(3, 100) : "" }}
            </div>
            <div class="firstShow-info-left-name">
              {{
                lottery.leader
                  ? (lottery.leader.nickname || "").substring(0, 11)
                  : "--"
              }}{{
                lottery.leader && (lottery.leader.nickname || "").length > 11
                  ? "..."
                  : ""
              }}
            </div>
          </div>
          <div v-else class="firstShow-info-xwyd">
            {{ $t("common.xwyd") }}
          </div>
          <div class="firstShow-info-center items-center">
            <!-- 用户头像背景 -->
            <img
              class="firstShow-info-center-avatar-bg"
              src="/image/lotterymoney/firstShow-userbg-icon.svg"
            />
            <ImgNuxt
              class="firstShow-info-center-avatar"
              isHttp
              :placeholder="file.avatarDefault"
              :src="
                (lottery.leader && lottery.leader.avatar) || file.avatarDefault
              "
            />
          </div>
          <div v-if="lottery.leader" class="firstShow-info-right">
            <div class="firstShow-info-right-team">
              {{ $t("lotteryMoney.ssdw") }}
            </div>
            <div class="firstShow-info-right-teamname">
              {{ lottery.leader && lottery.leader.teamName }}
            </div>
          </div>
          <div v-else class="firstShow-info-xwyd">
            {{ $t("common.xwyd") }}
          </div>
        </div>
      </div>
      <!-- 领先者描述 -->
      <div class="theLastDesc">
        <span>{{ $t("lotteryMoney.djsjsgfjj1") }}</span>
        <span
          class="theLastDesc-value"
          :class="{ 'theLastDesc-value-sun': isSun }"
        >
          {{
            lottery.leader && lottery.leader.nickname
              ? lottery.leader.nickname.substring(0, 11)
              : "--"
          }}{{
            lottery.leader && (lottery.leader.nickname || "").length > 11
              ? "..."
              : ""
          }}
        </span>
        <span>{{ $t("lotteryMoney.djsjsgfjj2") }}</span>
        <span
          class="theLastDesc-value"
          :class="{ 'theLastDesc-value-sun': isSun }"
        >
          {{ lottery.pool ? (lottery.pool.sessionPrizeRate || 0) * 100 : 0 }}%
        </span>
        {{ $t("lotteryMoney.djsjsgfjj3") }}，
        <span
          class="theLastDesc-value"
          :class="{ 'theLastDesc-value-sun': isSun }"
        >
          {{ lottery.leader ? lottery.leader.teamName || "--" : "--" }}
        </span>
        {{ $t("lotteryMoney.djsjsgfjj4") }}
        <span
          class="theLastDesc-value"
          :class="{ 'theLastDesc-value-sun': isSun }"
        >
          {{ lottery.pool ? (lottery.pool.teamPrizeRate || 0) * 100 : 0 }}%
        </span>
        {{ $t("lotteryMoney.djsjsgfjj3") }}
      </div>
    </div>
    <!-- 垂直轮播 -->
    <VerticalSwipe
      v-if="status == 2 || status == 1 || status == 3"
      class="verticalSwipeView"
      :activitytStatus="status"
      :peoples="status != 1 ? lottery.sessionUserCount || 0 : 0"
      :serverTime="pageData.serverTime || 0"
      :sessionId="lottery.sessionId"
      :lotteryPoolAmount="
        lottery.pool ? lottery.pool.lotteryPoolAmount || 0 : 0
      "
      :sessionUserCount="lottery.sessionUserCount || 0"
      :sessionTotalDrawCount="lottery.sessionTotalDrawCount || 0"
    ></VerticalSwipe>
  </div>
</template>
<script setup lang="ts" name="lotteryStart">
import { toThousands, decimalToLength } from "@/utils";
import VerticalSwipe from "./vertical-swipe.vue";
import { useEventBus, useDateFormat } from "@vueuse/core";
import Progress from "./progress.vue";

const props = defineProps<{
  lottery: Object;
  status: Number;
  curDay: Number;
  beginTimeTag: String | Number;
  firstStageEndTimeTag: String | Number;
  secondEndTimeTag: String | Number;
  isSun: boolean; // 是不是周日的超级大赢家
}>();

const emit = defineEmits(["lastPunter"]);

// 资源
const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
});

// 定时器-通知
let unsubscribe: any = null; // 定时器通知对象
let unsubscribeFns: any = {}; // 执行的函数数组
const moneyInterval = useEventBus("lottery-money-interval-emit");

// 页面属性
const pageData = reactive({
  activitytStatus: 0, //   1 未开始  2 进行中  3 已结束
  serverTime: 0, // 默认当前时间
});

// 倒计时
const theLastTime = ref({
  minutes: "--",
  seconds: "--",
  time: "--:--",
});
let drawEndTime: any = null; // 倒计时结束时间

// 领先者倒计时
const updateTheLastCountdown = () => {
  if (!props || !props.lottery || !props.lottery.leader) return;
  // 重置:避免等于 00:00以后就无法更新了
  theLastTime.value = {
    minutes: "--",
    seconds: "--",
    time: "--:--",
  };
  // 倒计时结束时间变化
  drawEndTime = props.lottery.leader.drawEndTime;
  // 更新倒计时显示
  function updateCountdown() {
    if (!props.lottery) return;

    // 设置倒计时的初始时间（10分钟）
    let timeLeft = (Number(drawEndTime) - Number(pageData.serverTime)) / 1000; // 10分钟转换为秒
    // console.log(
    //   useDateFormat(Number(drawEndTime), "YYYY-MM-DD HH:mm:ss").value,
    //   "-- 下注时间 --",
    //   timeLeft
    // );
    // 定义一个函数来格式化时间
    function formatTime(seconds: any) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = decimalToLength(seconds % 60, 0);
      return {
        minutes: minutes.toString().padStart(2, "0"),
        seconds: remainingSeconds.toString().padStart(2, "0"),
        time: `${minutes.toString().padStart(2, "0")}:${remainingSeconds
          .toString()
          .padStart(2, "0")}`,
      };
    }
    if (timeLeft < 0) {
      return {
        minutes: "--",
        seconds: "--",
        time: "00:00",
      };
    } else {
      const t = formatTime(timeLeft);
      if (timeLeft > 0) {
        timeLeft--;
        return t;
      } else {
        // 倒计时结束后执行的操作
        return {
          minutes: "--",
          seconds: "--",
          time: "00:00",
        };
      }
    }
  }
  // 倒计时
  let isRefrrsh = false;
  unsubscribeFns["updateTheLastCountdown"] = (val: number) => {
    // console.log("lottery-start-定时器");
    if (pageData.serverTime != val) pageData.serverTime = val;
    if (props.status == 2) {
      if (theLastTime.value.time != "00:00") {
        theLastTime.value = updateCountdown();
      }
      // 延迟一秒请求最新的数据,如果倒计时,时间没有变,说明结束了
      else {
        if (!isRefrrsh) {
          isRefrrsh = true;
          setTimeout(() => {
            emit("lastPunter");
          }, 1000);
        }
      }
    }
  };
};

// 未开始倒计时
let hours = ref("--");
let minutes = ref("--");
let seconds = ref("--");
function updateLotteryCountdown() {
  const endTime = Number(props.lottery.beginTime);
  let isRefrrsh = false;
  // 计算函数
  const updateCountdown = (now: any) => {
    const distance = endTime - Number(now);
    // 倒计时结束时的处理
    if (distance < 0 && !isRefrrsh) {
      isRefrrsh = true;
      setTimeout(() => {
        emit("lastPunter");
      }, 1000);
      return;
    }
    // 计算剩余的小时、分钟和秒
    if (distance >= 0) {
      // console.log("-distance--", distance);
      hours.value = `${Math.floor(
        (distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60)
      )}`;
      if (Number(hours.value) < 10) hours.value = `0${hours.value}`;
      minutes.value = `${Math.floor(
        (distance % (1000 * 60 * 60)) / (1000 * 60)
      )}`;
      if (Number(minutes.value) < 10) minutes.value = `0${minutes.value}`;
      seconds.value = `${Math.floor((distance % (1000 * 60)) / 1000)}`;
      if (Number(seconds.value) < 10) seconds.value = `0${seconds.value}`;
    }
  };
  // 先执行一次,不然要等一秒才能计算
  if (pageData.serverTime > 0) updateCountdown(pageData.serverTime);
  //
  if (props.status == 1) {
    unsubscribeFns["updateLotteryCountdown"] = (val: number) => {
      if (pageData.serverTime != val) pageData.serverTime = val;
      // console.log("lottery-start-1111-定时器");
      if (props.status == 1) {
        updateCountdown(val);
      }
    };
  }
}

/**
 * @description: 监听属性变化
 * 1. 获取到活动开始时间,更新倒计时
 * 2. 别人下注,更新倒计时
 */
watch(
  () => props.lottery,
  (newVal, oldVal) => {
    if (newVal) {
      // 1.
      if (newVal.beginTime && newVal.sessionStatus == 1) {
        updateLotteryCountdown();
      }
      // 2.
      if (newVal.leader) {
        if (newVal.leader.drawEndTime != drawEndTime) {
          updateTheLastCountdown();
        }
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

onMounted(async () => {
  // 1.更新倒计时
  updateTheLastCountdown();
  // 2. 统一的定时器,通知,组件加载的时候只初始化一次
  if (!unsubscribe) {
    unsubscribe = moneyInterval.on((val) => {
      // console.log(
      //   props.status,
      //   "--unsubscribeFns--",
      //   Object.keys(unsubscribeFns).length
      // );
      if (unsubscribeFns && Object.keys(unsubscribeFns).length > 0) {
        Object.keys(unsubscribeFns).forEach((key: any) => {
          // console.log("--unsubscribeFns--", key);
          const fn = unsubscribeFns[key];
          if (fn && typeof fn === "function") {
            fn(val);
          }
        });
      }
    });
  }
});
onBeforeUnmount(() => {
  // 1.注销通知
  if (unsubscribe) unsubscribe();
});
</script>
<style scoped lang="scss">
.notstart {
  top: -10 * 2px;
  left: 0;
  z-index: 98;
  border-radius: 6 * 2px;
  backdrop-filter: blur(6px) brightness(63%);
  background: rgba(255, 252, 252, 0.3);
  justify-content: center;
  position: absolute;
  width: 100%;
  height: calc(100% + 10 * 2px);

  &-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-width: 268 * 2px;
    margin: 0 35 * 2px 0 35 * 2px;
    min-height: 178 * 2px;
    padding: 12 * 2px;
    border-radius: 8 * 2px;
    background: linear-gradient(180deg, #d2f2ff 0%, #fff 100%);
    &-sun {
      background: linear-gradient(180deg, #fff3d6 0%, #fff 100%);
    }
  }
  &-title {
    justify-content: center;
    flex-direction: column;

    &-icon {
      width: 30 * 2px;
      height: 30 * 2px;
      margin-bottom: 3 * 2px;
    }

    &-text {
      font-size: 15 * 2px;
      font-weight: 590;
      color: #002853;
    }
  }
  &-center {
    justify-content: center;
    margin: 14 * 2px 0;
    &-text {
      font-size: 20 * 2px;
      font-weight: 700;
      color: #007bff;
      background-color: #fff;
      border: 0.6px solid rgba(115, 119, 128, 0.15);
      border-radius: 2 * 2px;
      padding: 2 * 2px 4 * 2px;
      margin-left: 4 * 2px;
      &-sun {
        color: #ffb800;
      }
    }
    &-width {
      min-width: 38 * 2px;
      text-align: center;
    }
  }
  &-footer {
    text-align: center;
    font-size: 13 * 2px;
    font-weight: 400;
    color: #999da7;
  }
}
.firstShow {
  position: relative;
  z-index: 9;
  justify-content: center;
  flex-direction: column;
  margin-top: 25 * 2px;
  margin-bottom: 15 * 2px;
  &-bg {
    position: absolute;
    z-index: 8;
    top: 22 * 2px;
    left: 0;
    width: 100%;
    border: none !important;
  }
  &-bg-top {
    position: absolute;
    z-index: 8;
    top: 0px;
    height: 22 * 2px;

    &-left {
      left: -12.5 * 2px;
    }
    &-right {
      right: -12.5 * 2px;
      transform: rotateY(180deg);
    }
  }

  &-title {
    position: relative;
    padding: 3 * 2px 8 * 2px;
    justify-content: center;
    background-color: #00e7b5;
    &-text {
      color: #002853;
      font-size: 13 * 2px;
      font-weight: 590;
      margin-right: 8 * 2px;
    }
    &-countdown {
      &-left {
        min-width: 20 * 2px;
        text-align: center;
        border-radius: 6px;
        border: 1px solid #fff;
        background: rgba(255, 255, 255, 0.8);
        padding: 0 2 * 2px;
        color: #007bff;
        font-size: 13 * 2px;
        font-weight: 510;
      }
      &-center {
        margin: 0 3 * 2px;
        color: #fff;
        font-size: 13 * 2px;
        font-weight: 510;
      }
      &-right {
        min-width: 20 * 2px;
        color: #007bff;
        font-size: 13 * 2px;
        font-weight: 510;
        padding: 0 2 * 2px;
        text-align: center;
        border-radius: 6px;
        border: 1px solid #fff;
        background: rgba(255, 255, 255, 0.8);
      }
    }
  }

  &-info {
    margin-top: 14 * 2px;
    width: 100%;
    justify-content: center;
    z-index: 9;
    &-xwyd {
      text-align: center;
      min-width: 76 * 2px;
      max-width: 76 * 2px;
      color: #fff;
      font-size: 12 * 2px;
      font-weight: 400;
    }
    &-left {
      text-align: center;
      min-width: 96 * 2px;
      &-sid {
        color: #fff;
        font-size: 12 * 2px;
        margin-bottom: 4 * 2px;
      }
      &-name {
        color: #fff;
        font-size: 14 * 2px;
        font-weight: 590;
      }
    }
    &-center {
      position: relative;
      margin: 0 30 * 2px;
      width: 53 * 2px;
      min-height: 57 * 2px;
      justify-content: center;
      &-avatar {
        width: 36 * 2px;
        height: 36 * 2px;
        border-radius: 100px;
        overflow: hidden;
        &-bg {
          position: absolute;
          top: 0;
          width: 76 * 2px;
        }
      }
    }
    &-right {
      min-width: 96 * 2px;
      text-align: center;
      &-team {
        color: #fff;
        font-size: 12 * 2px;
        margin-bottom: 4 * 2px;
      }
      &-teamname {
        color: #fff;
        font-size: 14 * 2px;
        font-weight: 590;
      }
    }
  }

  &-left {
    justify-content: center;
    flex-direction: column;
    position: relative;
    top: 10 * 2px;
    &-avatar {
      width: 20 * 2px;
      height: 20 * 2px;
      margin-bottom: 4 * 2px;
    }
    &-nickname {
      @include multi-line-omit(1);
      min-width: 95 * 2px;
      max-width: 95 * 2px;
      margin-right: 4 * 2px;
      text-align: center;
      color: #fff;
      font-size: 13 * 2px;
      font-weight: 590;
    }
  }

  &-center {
    z-index: 9;
    margin-top: 5 * 2px;
    padding: 4 * 2px;
    border-radius: 8 * 2px;
    background: #fff;
    overflow: hidden;
    &-time {
      margin-bottom: 3 * 2px;
      justify-content: center;
      font-size: 11 * 2px;
      color: #002853;
      font-weight: 590;
    }
    &-countdown {
      position: relative;

      &-dw {
        color: #ced1d9;
        font-size: 11 * 2px;
      }
      &-left {
        min-width: 40 * 2px;
        padding: 4 * 2px;
        font-size: 15 * 2px;
        color: #007bff;
        font-weight: 600;
        border-radius: 2 * 2px;
        background: #f0f3fa;
      }
      &-center {
        margin: 0 4 * 2px;
        padding: 4 * 2px;
        font-size: 15 * 2px;
        color: #007bff;
        font-weight: 600;
        border-radius: 2 * 2px;
        background: #f0f3fa;
      }
      &-right {
        min-width: 40 * 2px;
        padding: 4 * 2px;
        font-size: 15 * 2px;
        color: #007bff;
        font-weight: 600;
        border-radius: 2 * 2px;
        background: #f0f3fa;
      }
    }
  }

  &-footer {
    margin-top: 1 * 2px;
    margin-bottom: 10 * 2px;
    padding: 2 * 2px 8 * 2px;
    border-radius: 4 * 2px 4 * 2px 0px 0px;
    border: 2px solid #ffbc39;
    background: linear-gradient(180deg, #f99f12 0%, #ffb801 100%);

    &-left {
      font-size: 12 * 2px; // 字号变大高度-就不够了
      color: #ca7521;
    }
    &-center {
      height: 10 * 2px;
      width: 1px;
      margin: 0 8 * 2px;
      background-color: rgba(115, 119, 128, 0.15);
    }
    &-right {
      font-size: 12 * 2px;
      color: #ca7521;
    }
  }

  &-betnums {
    position: relative;
    justify-content: center;
    z-index: 9;
    padding: 4 * 2px 9 * 2px;
    background: #ff9d07;
    border-radius: 4 * 2px;
    color: #fff;
    font-size: 12 * 2px;
    &-view {
      position: relative;

      margin-bottom: 6 * 2px;
    }
    &-left {
      position: relative;
      left: 10 * 2px;
    }
    &-right {
      position: relative;
      right: 10 * 2px;
    }
  }

  &-bet {
    font-size: 12 * 2px;
    color: #141441;
    // margin-bottom: 10 * 2px;
  }
  &-nums {
    font-size: 12 * 2px;
    color: #444444;
  }
  &-desc {
    margin-left: 8 * 2px;
    font-size: 11 * 2px;
    color: #2a91ff;
  }
  &-countdown {
    margin-left: 3 * 2px;
    min-width: 55 * 2px;
    text-align: center;
    border-radius: 4 * 2px;
    padding: 2 * 2px 6 * 2px;
    background-color: #2a91ff;
    color: #fff;
    font-weight: 700;
  }
  &-second {
    &-desc {
      font-size: 12 * 2px;
      color: #999da7;
      margin-bottom: 10 * 2px;
    }
  }
}
.lotteryStart {
  position: relative;
  top: -10 * 2px;
  padding: 10 * 2px;
  border-radius: 12 * 2px;
  background-color: #fff;
  &-progress {
    margin-bottom: 6 * 2px;
  }

  &-countdown {
    &-title {
      text-align: center;
      font-size: 22 * 2px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 20 * 2px;
    }
    &-piont {
      color: #fff;
      font-size: 32 * 2px;
      font-weight: 900;
      color: #fff;
    }
    &-item {
      padding: 0 6 * 2px;
      min-width: 66 * 2px;
      height: 66 * 2px;
      text-align: center;
      line-height: 66 * 2px;
      border-radius: 4 * 2px;
      margin: 0 6 * 2px;
      background-color: #fff;
      font-size: 42 * 2px;
      font-weight: 600;
      color: #141924;
    }
    &-desc {
      text-align: center;
      margin-top: 20 * 2px;
      font-size: 14 * 2px;
      color: #fff;
    }
  }
}

.theLast {
  overflow: hidden;
  position: relative;
  z-index: 9;
  margin: 10 * 2px 0 * 2px 0 * 2px 0 * 2px;
  padding: 10 * 2px 13 * 2px;
  border-top-left-radius: 12 * 2px;
  border-top-right-radius: 12 * 2px;
  background: linear-gradient(
    180deg,
    rgba(0, 123, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  &-title {
    color: #141924;
    font-size: 17 * 2px;
    font-weight: 600;
    text-align: center;
  }
  &-avatar {
    width: 58 * 2px;
    height: 58 * 2px;
    border-radius: 58 * 2px;
    overflow: hidden;
    border: 3px solid #fff;
  }
  &-right {
    flex: 1;
    margin-left: 10 * 2px;
    &-level {
      width: 30 * 2px;
      height: 30 * 2px;
    }
    &-desc {
      color: #141924;
      font-size: 14 * 2px;

      &-time {
        margin-left: 3 * 2px;
        min-width: 55 * 2px;
        text-align: center;
        border-radius: 4 * 2px;
        padding: 2 * 2px 6 * 2px;
        background-color: #2a91ff;
        color: #fff;
        font-weight: 700;
      }
    }
    &-nick {
      &-text {
        @include multi-line-omit(1);
        color: #002853;
        font-size: 15 * 2px;
        font-weight: 590;
      }
      &-sid {
        flex: 1;
        color: #002853;
        font-size: 15 * 2px;
        font-weight: 590;
      }
    }
  }
}

.verticalSwipeView {
  padding: 10 * 2px;
  background-color: #fff;
  border-radius: 12 * 2px;
  margin-bottom: 10 * 2px;
}

.theLastDesc {
  width: 100%;
  font-size: 12 * 2px;
  font-weight: 400;
  color: #999da7;
  text-align: center;
  &-value {
    font-size: 12 * 2px;
    font-weight: 400;
    color: #007bff;
    &-sun {
      color: #ffb800;
    }
  }
}

.nickname-oneRow {
  // height: 14.5 * 2px;
  // line-height: 22.5 * 2px;
}
</style>
